<template>
    <view class="refresher-container">
        <!-- 这里的图片请换成自己项目的图片 -->
        <div
            class="var-pull-refresh-control"
            style="transform: translate3d(0, 14px, 0) translate(-50%)"
        >
            <text
                v-if="status === 'default'"
                class="default iconfont icon-xiangxiajiantoucuxiao"
                style="color: rgb(103 81 164)"
            />
            <!-- class="loading iconfont icon-shuaxin var-icon-loading" -->
            <text
                v-if="status == 'release-to-refresh' || status == 'loading'"
                style="color: rgb(103 81 164)"
                :class="[
                    'loading iconfont icon-shuaxin',
                    { 'var-icon-loading': status === 'loading' },
                ]"
            />
            <text
                v-if="status === 'complete'"
                class="complete iconfont icon-duihao2-copy"
            />
        </div>
    </view>
</template>

<script setup lang="ts">
defineProps({
    status: {
        type: String,
        default: function () {
            return 'default';
        },
    },
});
</script>

<style scoped>
.refresher-container {
    /* #ifndef APP-NVUE */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* #endif */
    height: 150rpx;
}

.refresher-image {
    width: 45px;
    height: 45px;
    margin-top: 10rpx;
}

.refresher-text {
    margin-top: 10rpx;
    font-size: 24rpx;
    color: #666;
}

.var-pull-refresh-control {
    position: absolute;
    left: 50%;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80rpx;
    height: 80rpx;
    color: rgb(57 123 254);
    background-color: rgb(254 247 255);
    border-radius: 50%;
    box-shadow:
        rgb(0 0 0 / 20%) 0 3px 1px -2px,
        rgb(0 0 0 / 14%) 0 2px 2px 0,
        rgb(0 0 0 / 12%) 0 1px 5px 0;
}

.default {
    animation: fade-inouts 1s ease-in-out; /* 持续3秒、缓动循环 */
}

.loading {
    animation: fade-inouts 1s ease-in-out; /* 持续3秒、缓动循环 */
}

.complete {
    color: #00c28e;
    animation: fade-inouts 1s ease-in-out; /* 持续3秒、缓动循环 */
}

@keyframes fade-inouts {
    0% {
        opacity: 0;
        transform: scale(0.8); /* 初始缩小并透明 */
    }

    100% {
        opacity: 1;
        transform: scale(1); /* 中间完全显示并恢复原始大小 */
    }
}

.var-icon-loading {
    transform-origin: center; /* 确保旋转中心为元素中心 */
    animation: infinite-rotate 1.5s cubic-bezier(0.3, 0.6, 0.2, 1.4) infinite;
}

/* 定义旋转动画 */
@keyframes infinite-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
</style>
